<template>
  <div class="container">
    <div class="center">
      <div class="l hidden-xs-only">
        <div class="footer-icp">
          Copyright @ 2016-2023 湖南智斌版权所有 蜀ICP备17004638号-3
        </div>
      </div>
      <div class="r" >
        <h2 class="title">湖南智斌后台管理系统</h2>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          @keyup.enter.native="handleLogin">
          <el-form-item prop="username">
            <div class="input-warp">
              <img src="../../static/username.png" >
              <el-input v-model="loginForm.username"  placeholder="请输入账号" clearable >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="input-warp">
              <img src="../../static/password.png" >
              <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" clearable >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="code">
            <div class="code-row">
              <div class="input-warp">
                <img src="../../static/code.png" >
                <el-input
                  v-model="loginForm.code"
                  clearable
                  auto-complete="off"
                  placeholder="验证码"
                >
                </el-input>
              </div>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="btn" @click="handleLogin">
              <i v-show="loading" class="el-icon-loading"></i>
              <span>
								马上登录
							</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const loginRules = {
  username: [{ required: true, message: '请填写账号', trigger: 'blur' }],
  password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
  code: [{ required: true, message: '请填写验证码', trigger: 'blur' }]
}
import { getCodeImg } from "@/api/login";
export default {
  data() {
    return {
      loginRules,
      loginForm: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      codeUrl: '',
      loading: false
    }
  },
  mounted() {
    this.getCode()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            this.getCode();
          });
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F0F2F5;
  width: 100%;
  height: 100%;
  .center{
    width: 100%;
    background: #fff;
    height: 100%;
    display: grid;
    @media screen and (min-width: 768px){
      grid-template-columns: repeat(2, 1fr);
    }
    .l{
      background-image: url('../../static/bg.png');
      background-repeat: no-repeat;
      background-size: contain;
      font-size: 0;
      position: relative;
      .footer-icp{
        color: #fff;
        font-size: 15px;
        position: absolute;
        bottom: 100px;
        width: 100%;
        text-align: center;
      }
    }
    .r{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 40px;
      ::v-deep input{
        border: none;
      }
      .input-warp{
        border: 1px solid #D9D9D9;
        height: 50px;
        display: flex;
        align-items: center;
        flex: 1;
        padding: 0 10px;
        justify-content: center;
        img{
          aspect-ratio: 1;
          width: 20px;
        }
      }
      .title{
        color: #0088F4;
        font-weight: bold;
      }
      .btn{
        height: 40px;
        background: linear-gradient( 270deg, #005BFF 0%, #6BAFFF 100%);
        box-shadow: 0px 0px 20px 0px rgba(0,91,255,0.4);
        border-radius: 0px 0px 0px 0px;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        grid-column-gap: 6px;
        color: #fff;
        cursor: pointer;
      }
      .code-row{
        display: flex;
        justify-content: space-between;
        grid-column-gap: 15px;
        .login-code {
          img {
            height: 100%;
            width: 100px;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
